<template>
  <div class="buy-course">
    <div class="course-list-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/?type=1' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>优品好课</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="course-list">
        <!-- <div class="course-item" >
        </div> -->
        <el-row :gutter="20">
          <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" v-for="item in courseList" :key="item.id" >
            <div class="course-item" @click="gotoDetail(item.id)">
              <img :src="item.full_cover" alt="" />
              <div class="course-info">
                <div class="course-title">{{ item.title }}</div>
                <div class="price-info">
                  <div class="course-price">￥{{ item.price }}</div>
                  <div class="course-time"></div>
                  <!-- {{ 0 }}课时 -->
                <!-- <img src="@/assets/play1.png" alt="" /> -->
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getExcellentlist } from '@/api/course.js'
export default {
  name: "GoodCourse",
  data() {
    return {
      courseList: [],
      types: 1
    };
  },
  mounted() {
    this.types = this.$route.query.type
    this.getExcellentlist()
  },
  methods: {
    gotoDetail(id) {
      this.$router.push({
        path: '/GoodCourseDetail',
        query: {
          id
        }
      })
    },
    getExcellentlist() {
      let that = this
      getExcellentlist({limit:100}).then(res => {
        that.courseList = res.list
      })
    }
  }
};
</script>

<style lang="scss">
.course-list-box {
  padding: 1.5% 12.5%;

  .course-list {
    padding: 4.4vh 0;
    // display: flex;
    // justify-content: space-between;
    // flex-wrap: wrap;

    .course-item {
      width: 100%;
      height: 360px;
      // min-height: 330px;
      box-shadow: 0px 3px 10px 0px rgba(153, 153, 153, 0.1);
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
      cursor: pointer;
      margin-bottom: 2vh;
      user-select: none;

      >img {
        width: 100%;
        height: calc((22/36) * 100%);
      }

      >div {
        padding: 2%;
      }

      .course-title {
        color: #333333;
        font-size: 1.8vh;
      }

      .course-info {
        height: calc(14/36 * 100% - 4%);
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .course-time {
          color: #999;
          font-size: 1.6vh;
        }

        >img {
          width: 1vw;
          height: 2vh;
        }
      }
      .price-info{
        display: flex;
        justify-content: space-between;
      }
      .course-price{
        font-size: 2.3vh;
        color: #FF6D6A;
      }
    }
  }
}
</style>